<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    {% if debug %}
      <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.js"></script>
      <script type="text/javascript" src="{{ MEDIA_URL }}js/protovis-d3.2.js"></script>
    {% else %}
      <script type="text/javascript" src="{{ MEDIA_URL }}js/jquery-1.4.2.min.js"></script>
      <script type="text/javascript" src="{{ MEDIA_URL }}js/protovis-r3.2.js"></script>
    {% endif %}
    <script type="text/javascript" src="{{ MEDIA_URL }}js/xbreadcrumbs.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/quickselect.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/quicksilver.js"></script>
    <script type="text/javascript" src="{{ MEDIA_URL }}js/gene_survival.js"></script>
    
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}style/quickselect.css">
    <link rel="stylesheet" href="{{ MEDIA_URL }}style/xbreadcrumbs.css">
    <link rel="stylesheet" href="{{ MEDIA_URL }}style/style.css" type="text/css">
    
    <title>Project Betastasis</title>
  </head>
  <body>
    
    <div id="header">
      <h1 id="logo"><a href="../">Project Betastasis</a></h1>
    </div>
    
    <ul class="xbreadcrumbs" id="breadcrumbs">
      <li><a href="/">Home</a></li>
      {% include 'cancer_type_nav.html' %}
      {% include 'data_set_nav.html' %}	  
      <li><a href="#">Gene survival association</a>
	<ul>
	  {% include 'platform_vis_nav.html' %}
	</ul>
      </li>   
    </ul>

<div id="main">
	<h2>{{current_data_set.meta.name}}</h2>
	
	<h3>Gene survival association</h3>
	
	<div id="fig"></div>

</div>

<div id="side">
	<p><b>Visualization</b><br>
	Platform: {{current_platform.name}}<br><br>
	Gene: <input type="text" id="GeneSelect" value="{{default_gene}}" />
	</p>
</div>

<div id="footer" />
</body>

<script type="text/javascript">
var genelist;
var genelist_downloaded = function(d) {
	genelist = d['genes'];
	$('#GeneSelect').quickselect({
		maxVisibleItems: 10, minChars: 1, matchMethod: 'quicksilver',
		autoSelectFirst: false, selectSingleMatch: false,
		data: genelist});
}

var data_root = "/{{current_data_set.id}}/{{current_platform.id}}";
	
$(document).ready(function() {
	$('#breadcrumbs').xBreadcrumbs();
	var vis = new GeneSurvival('fig');
	$.getJSON(data_root + '/surv_json/',
		function(d) { vis.setSurvival(d); });
	$.getJSON(data_root + '/TP53/surv_expr_json/',
		function(d) { vis.setExpression(d); });
	
	$.getJSON(data_root + '/gene_list_json/', genelist_downloaded);

	$('#GeneSelect').change(function() {
		gs = $(this);
		// For some reason the $(this).val() hasn't yet updated when we get
		// to this function if the user selects a gene with the mouse. So we use
		// a tiny timeout here.
		setTimeout(function() {
			gene = gs.val();
			if (genelist.indexOf(gene) == -1) {
				gs.css('background-color', '#f66');
				return;
			}
		
			gs.css('background-color', 'white');
			$.getJSON(data_root + '/' + gene + '/surv_expr_json/',
				function(d) { vis.setExpression(d); });
		}, 10);
	});

});
</script>

</html>
